<script>
export default {
  created() {
    this.home_flower();
  },
  data() {
    return {
      
      // nav_count: 4,
      home_list:[], // 首页鲜花的集合
      // 轮播图
      nav_img_list: [
        { image: require('./img/1.jpg') },
        { image: require('./img/2.jpg') },
        { image: require('./img/3.jpg') },
      ],
    }
  },
  
  methods: {
    // 查询首页鲜花方法
    async home_flower() {
      const {data : res} = await this.$http.get("/flower-goods/home_flower/"+0)
      this.home_list = res.data;
    },
    // 调用商品详细
    shop_id(goodsId){
      this.$router.push({path:"/details",query: {goodId: goodsId}})
    }
  }
}
</script>
<template>
  <div class="app">
    <!-- 轮播图 -->
    <nav>
      <div class="block">
        <el-carousel height="500px">
          <el-carousel-item v-for="item in nav_img_list" :key="item.image">
            <img :src="item.image" style="height: 500px; width: 1841px" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </nav>
    <!-- 送花对象 -->
    <section class="send_section">
      <div class="lover">
        <a href="#"><img src="./img/home_lover.jpg" /></a>
      </div>
      <div class="present">
        <a href="#"><img src="./img/home_friend.jpg" /></a>
      </div>
      <div class="elder">
        <a href="#"><img src="./img/home_elder2.jpg" /></a>
      </div>
      <div class="happy">
        <a href="#"><img src="./img/home_birthday.jpg" /></a>
      </div>
    </section>
    <!-- 专区 -->
    <section class="hot_module">
      <div class="hot_selling">
        <a href="#"><img src="./img/home_rexiao.png" /></a>
      </div>
      <div class="hot_sale">
        <a href="#"><img src="./img/home_tejia.png" /></a>
      </div>
      <div class="hot_new">
        <a href="#"><img src="./img/home_xinpin.png" /></a>
      </div>
      <div class="hot_tacte">
        <a href="#"><img src="./img/home_pinwei.png" /></a>
      </div>
    </section>
    <!-- 鲜花专区 -->
    <footer class="footer_two">
      <div class="footer_title">
        <h2>爱情鲜花</h2>
        <span>| 送~让你怦然心动的人</span>
      </div>
      <div class="footer_body">
        <img src="./img/home_floor_lover.png" class="footer_left" />
        <div class="footer_box" v-for="item in home_list" :key="item.goodsId" @click="shop_id(item.goodsId)">
          <div class="box_img">
            <img :src="$api+'/common/download/'+item.goodsImg" />
          </div>
          <div class="box_text">
            <span>{{ item.goodsName }}</span>
            <h3>￥{{ item.goodsPrice }}</h3>
            <span class="text_span">已售 {{ item.goodsSold }}</span>
          </div>
        </div>
      </div>
    </footer>
    <footer class="footer_one">
      <span
        >晚云小卖铺终于获得了期待已久的许可证，这意味着他们可以正式开展业务了。这个许可证是他们长期努力的结果，也是他们对未来的坚定信念的证明。
        现在，他们可以开始策划各种营销活动，吸引更多的客户，提升店铺的知名度和影响力。
        同时，他们也可以放心地扩大经营范围，增加新的商品种类，以满足更多客户的需求。总的来说，这个许可证为晚云小卖铺带来了无尽的可能性和机遇。</span
      >
    </footer>
  </div>
</template>

<style lang="less" scoped>
@import url('@/views/css/home.less');// 引入外部css文件
</style>